<template>
  <view class="ai-composer">
    <view class="ai-composer-inputWrap">
      <ai-input-multi ref="composerInputRef"
        :composer="true"
        :placeholder="placeholder"
        :show-border="false" 
        :auth-height="true" 
        v-model:value="inputText" 
        @change="handleInputChange"></ai-input-multi>
    </view>
    <view class="ai-composer-actions">
      <view v-if="sendBtnVisable" class="ai-composer-sendBtn">
        <ai-button color="primary" 
          :min-width="0" 
          :disabled="sendBtnDisabled" 
          @click="handleSendMessage">发送</ai-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "ai-composer",
    emits: ["send"],
    props: {
      placeholder: String,
    },
    data() {
      return {
        inputText: "",
        sendBtnVisable: false,
        sendBtnDisabled: false
      };
    },
    methods: {
      handleInputChange(v) {
        this.sendBtnVisable = v && v.length > 0
      },
      handleSendMessage() {
        let message = this.inputText
        this.inputText = ""
        this.$emit("send", message)
      },
      inputFocus() {
        this.$refs.composerInputRef.focused()
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .ai-composer {
    display: flex;
    align-items: flex-end;
    padding: $composer-padding;

    .m-left {
      margin-left: 9px;
    }
  }

  .ai-composer-actions {
    display: flex;
    align-items: center;
    // #ifndef MP-ALIPAY
    height: $composer-input-min-height;
    padding-bottom: 5px;
    // #endif

    // .IconBtn {
    //   font-size: 30Px;
    //   color: var(--gray-1);
    // }
  }

  // .ai-composer-toggleBtn {
  //   transition: transform 0.2s;

  //   &.active .Icon {
  //     transform: rotate(45deg);
  //   }
  // }

  .ai-composer-inputWrap {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .ai-composer-sendBtn {
    padding-left: 16px;
    // padding-right: 16Px;
  }
</style>